{% extends "layout.html" %}

{% block header %}

{% endblock%}

{% block content %}
<div class="pb-2 mt-2 mb-4 border-bottom">
  <h3>账户信息</h3>
</div>
<form action='/account/profile' method='POST'>
  <input type='hidden'  name='_csrf'  value='{{_csrf}}' />
  <div class="form-group row">
    <label class="col-md-3 col-form-label font-weight-bold text-right" for="email">Email</label>
    <div class="col-md-7">
      <input class="form-control" type='email' name='email'  id='email'  placeholder='name' autofocus autocomplete='name'  required/>
    </div>
    <div class="offset-sm-3 col-md-7 pl-3">
      {% if user.emailVerified %}
        <div class="text-success font-italic">| Verified</div>
        {% else %}
        <div class="text-danger font-italic">
        | Unverified: &nbsp;
        <a href="/account/verify">Send verification email</a>
        </div>
        {% endif %}
    </div>
  </div>
  <div class="form-group row">
    <label class="col-md-3 col-form-label font-weight-bold text-right" for="name">姓名</label>
    <div class="col-md-7">
      <input class="form-control" type='name' name='name'  id='name' value={{user.profile.name}} placeholder='name' autofocus autocomplete='name'  required/>
    </div>
  </div>
  <div class="form-group row">
    <label class="col-md-3 col-form-label font-weight-bold text-right" for="name">性别</label>
    <div class="col-md-6">
      <div class="form-check form-check-inline">
        <input type='radio'  class='form-check-input' checked={{user.profile.gender == 'male'}}  name='gender' value='male'  data-toggle='radio'/>
        <label class="form-check-label">Male</label>
      </div>
      <div class="form-check form-check-inline">
        <input type='radio'  class='form-check-input' checked={{user.profile.gender == 'female'}}  name='gender' value='male'  data-toggle='radio'/>
        <label class="form-check-label">Female</label>
      </div>
      <div class="form-check form-check-inline">
        <input type='radio'  class='form-check-input' checked={{user.profile.gender == 'other'}}  name='gender' value='male'  data-toggle='radio'/>
        <label class="form-check-label">Other</label>
      </div>
    </div>
  </div>

  <div class="form-group row">
    <label class="col-md-3 col-form-label font-weight-bold text-right" for="location">地址</label>
    <div class="col-md-7">
      <input  type='text' name='location'  id='location' value='{{user.profile.location}}'   />
    </div>
  </div>
  <div class="form-group row">
    <label class="col-md-3 col-form-label font-weight-bold text-right" for="website">网址</label>
    <div class="col-md-7">
      <input  type='text' name='website'  id='website' value='{{user.profile.website}}'  autocomplete='url' />
    </div>
  </div>

  <div class="form-group row">
    <label class="col-md-3 col-form-label font-weight-bold text-right" >Gravatar</label>
    <div class="col-sm-4">
      <img src='{{user.gravatar()}}' class='profile'  width='100'  height='100'/>
    </div>
  </div>

  <div class="form-group">
    <div class="offset-sm-3 col-md-7 pl-2">
      <button class="btn btn-primary" type='submit'><i class="fas fa-pencil-alt fa-sm"></i> | 更新资料 </button>
    </div>
  </div>

</form>


<div class="pb-2 mt-2 mb-4 border-bottom">
  <h3>修改密码</h3>
</div>
<form action='/account/password'  method='POST'>
  <input type='hidden'  name='_csrf'  value='{{_csrf}}' />
  <div class="form-group row">
    <label class="col-md-3 col-form-label font-weight-bold text-right" for="password">新密码</label>
    <div class="col-md-7">
      <input class="form-control" type='password' name='password'  id='password'  placeholder='Password' autofocus autocomplete='new-password' minlength='8' required/>
    </div>
  </div>
  <div class="form-group row">
    <label class="col-md-3 col-form-label font-weight-bold text-right" for="confirmPassword">密码确认</label>
    <div class="col-md-7">
      <input class="form-control" type='password' name='confirmPassword'  id='confirmPassword'  placeholder='confirmPassword' autofocus autocomplete='new-password' minlength='8'  required/>
    </div>
  </div>
  <div class="form-group">
    <div class="offset-md-3 col-md-7 pl-2">
      <button class="btn btn-primary btn-reset" type='submit'><i class="far fa-keyboard fa-sm"></i> | 修改密码 </button>
    </div>
  </div>

</form>


<div class="pb-2 mt-2 mb-4 border-bottom">
  <h3>删除账号</h3>
</div>
<form action='/account/delete'  method='POST'  onsubmit="return confirm('确定要删除?');">
  <p class="offset-sm-3 col-md-7 pl-2">提示，删除操作将不可逆。</p>
  <input type='hidden'  name='_csrf'  value='{{_csrf}}' />

    <div class="offset-md-3 col-md-7 pl-2">
      <button class="btn btn-primary btn-reset" type='submit'><i class="fas fa-trash-alt fa-sm"></i> | 删除我自己 </button>
    </div>
</form>


<div class="pb-2 mt-2 mb-4 border-bottom">
  <h3>Linked Accounts</h3>
</div>
<div class="form-group">
  <div class="offset-sm-3 col-md-7 pl-2">
    {% if user.github %}
   <p class="mb-1"><a class="text-danger" href='/account/unlink/github' >Unlink your GitHub account</a></p>
    {% else %}
    <p class="mb-1"><a href='/auth/github'>Link your GitHub account</a></p>
    {% endif %}
  </div>
</div>
{% endblock %}